So I’m not trying to be prescriptive about my CMS, but it’s time to pick a front end framework to build the client side into something more. Will Svelte work? I’m not sure, honestly it came up as something to try for 2 reasons: one, it’s trending as a popular framework with a lot of dev work going on and good support; two, it already has a reputation as a graceful framework. That’s it.

So let’s see if I can create some progressive components to slot into our pre-rendered static HTML pages.

I have to say the Svelte tutorial on the framework page is an excellent example of an interactive tutorial with just enough information to get you feeling comfortable with the framework quickly. So I have learned a new word as I go through this tutorial the first time, "boilerplatey". It seems to be the tongue in cheek term used to describe overly repetitive code, and I like how the framework focuses on minimizing the existence of boilerplatey code. For instance if your class and the value you want to assign to it have the same name:

Instead of this

boilerplatey

class:small={small}

You can shorten it to this

sveltey

class:small

In a more codereducey example, for message forwarding instead of this (straight from the tut):

boilerplatey

<script>
	import Inner from ’./Inner.svelte’;
	import { createEventDispatcher } from ’svelte’;

	const dispatch = createEventDispatcher();

	function forward(event) {
		dispatch(’message’, event.detail);
	}
</script>

<Inner on:message={forward}/>

You can just do this:

sveltey

<script>
	import Inner from ’./Inner.svelte’;
</script>

<Inner on:message/>

And while I’m not through the whole tutorial yet, it seems there are a handful of very well placed shorthand techniques and some very simple but useful conventions and features. Did I mention there is a ton of animation support? So Svelte can make very flashy UI components by compiling to CSS animations where it can and JS animations where it can’t.

So I’m about 75% of the way through my first pass of the tutorial and my impression is this will do what I’m looking for, but this is also really overkill for this site, which I think is fine. I like the design choices Svelte has made and I don’t mind having to compile as I go (I do love Rust after all). I am curious about component size and efficiency, but I’ll get to that later as I build my own and see how they work in this site.

NOTE: The tutorial is about 4 hours, 8 if you have kids, maybe a weekend if you have kids, a demanding job, other responsibilities and like getting enough sleep.

Part Two >>>